<template>
	<view v-if="dateTimeArray">
		<picker mode="multiSelector" :range="dateTimeArray"  v-model="dateTime" @change="change" @columnchange="columnchange">
			<view>
				<!-- disable = "true" 是禁用input 防止点击弹出键盘 -->
				<input type="text" disabled="true" v-model="upTower" placeholder="请选择时间" placeholder-class="inputPlace" />
			</view>
		</picker>
	</view>
</template>

<script>
	import datepick from './datapickerjs/datepicker.js'
	export default {
		data() {
			return {
				// 时间选择器
				dateTimeArray: null,
				dateTime: null,
				startYear: 2000,
				endYear: 2050,
				upTower:'',
				//error提示
				tip:''
			};
		},
		props:{
			left:{
				type:null,
				default:null
			},
			flag:{
				type:null,
				default:null
			}
		},
		mounted() {
			//传入开始展示年份startYear 结束展示年份endYear
			//自定义开始显示时间
			let arr = '2018/09/01 13:00'
			let obj = datepick.dateTimePicker(this.startYear, this.endYear,arr)
			this.dateTimeArray = obj.dateTimeArray
			this.dateTime = obj.dateTime
		},
		methods: {
			//时间格式化
			withData(param){
				return param < 10 ? '0' + param : '' + param;
			},
			change(e){
				let value = []
				e.detail.value.forEach((val,index) => {
					if(index == 0){value.push(this.dateTimeArray[0][val])}
					else if(index == 1 || index == 2){value.push(this.withData(val+1))}
					else{value.push(this.withData(val))}
				})
				let dateArray = value[0] + "-" + value[1] + "-" + value[2] + " " + value[3] + ":" + value[4]
				if(this.flag == 'r'&&this.flag){//多选选择范围的时候判断会用到
					if(this.left){
						if(new Date(this.left).getTime()>new Date(dateArray).getTime()){
							this.$emit('errs2')
						}else{
							this.upTower = dateArray//用这个去判断可使用的区间
							this.$emit('datechange2',this.upTower)						
						}
						return;						
					}
					this.upTower = dateArray//用这个去判断可使用的区间
					this.$emit('datechange2',this.upTower)
					return;
				}
				this.upTower = dateArray//用这个去判断可使用的区间
			},
			columnchange(e){
				let dateArr = this.dateTimeArray
				let arr = this.dateTime
				//滑动所在列的数据并对其值进行更新
				arr[e.detail.column] = e.detail.value
				//更新展示月份对应的天数（28 or 29 or 30 or 31）
				dateArr[2] = datepick.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]])
				//最后把最新的数值赋值到dateTimeArray
				this.dateTimeArray = dateArr
				this.dateTime = arr
				
			},
		},
	}
</script>

<style>
</style>
